<template>
	<div class="View">
		<div class="title">
			<i class="iconfont"></i>
			ラベル編集
		</div>

		<div class="tabs">
			<el-button class="btn" :type="showFlg == 1 ? 'primary' : ''" @click="showFlgFn(1)">
				機器仕様
			</el-button>
			<el-button class="btn" :type="showFlg == 2 ? 'primary' : ''" @click="showFlgFn(2)">
				流体/圧力/温度
			</el-button>
			<el-button class="btn" :type="showFlg == 3 ? 'primary' : ''" @click="showFlgFn(3)">
				部品仕様
			</el-button>
			<el-button class="btn" :type="showFlg == 4 ? 'primary' : ''" @click="showFlgFn(4)">
				肉厚仕様
			</el-button>
			<el-button class="btn" :type="showFlg == 5 ? 'primary' : ''" @click="showFlgFn(5)">
				関連因子
			</el-button>
			<el-button class="btn" :type="showFlg == 6 ? 'primary' : ''" @click="showFlgFn(6)">
				系統情報
			</el-button>
		</div>

		<tab1 ref="tab1" class="content" @isChangeFlgFn="isChangeFlgFn" v-if="showFlg == 1"
			:baseDataList="allData.baseDataList" :CtgCodeList="CtgCodeList" :CtgCode="CtgCode"
			@changeCtgCode="changeCtgCode"></tab1>
		<tab2 ref="tab2" class="content" @isChangeFlgFn="isChangeFlgFn" v-if="showFlg == 2"
			:fluidList="allData.fluidList" :pressTempList="allData.pressTempList" :CtgCodeList="CtgCodeList"
			:CtgCode="CtgCode" @changeCtgCode="changeCtgCode"></tab2>
		<tab3 ref="tab3" class="content" @isChangeFlgFn="isChangeFlgFn" v-if="showFlg == 3"
			:partsStyleList="allData.partsStyleList" :CtgCodeList="CtgCodeList" :CtgCode="CtgCode"
			@changeCtgCode="changeCtgCode"></tab3>
		<tab4 ref="tab4" class="content" @isChangeFlgFn="isChangeFlgFn" v-if="showFlg == 4"
			:thickStyleList="allData.thickStyleList" :LawCodeList="LawCodeList" :LawCode="LawCode"
			@changeLawCode="changeLawCode"></tab4>
		<tab5 ref="tab5" class="content" @isChangeFlgFn="isChangeFlgFn" v-if="showFlg == 5"
			:relationFactorList="allData.relationFactorList"></tab5>
		<tab6 ref="tab6" class="content" @isChangeFlgFn="isChangeFlgFn" v-if="showFlg == 6"
			:systemIntelligence="allData.systemIntelligence"></tab6>

		<div class="footer">
			<el-button @click="initFn">
				{{ $t("message.environmentSetting.btns.bottomBtn.editor") }}
			</el-button>
			<el-button type="primary" class="okBTn" @click="startFn">
				{{ $t("message.environmentSetting.btns.bottomBtn.save") }}
			</el-button>
		</div>
	</div>
</template>

<script>
import tab1 from './tabs/tab1.vue';
import tab2 from './tabs/tab2.vue';
import tab3 from './tabs/tab3.vue';
import tab4 from './tabs/tab4.vue';
import tab5 from './tabs/tab5.vue';
import tab6 from './tabs/tab6.vue';
import { getEnvLabel, GetEnvLabelCombox, updEnvLabelTipsMsg, UpdEnvLabel } from '@/api/api';
import { showLoading, hideLoading } from "@/utils/loading";
export default {
	name: "Unit",
	data() {
		return {
			showFlg: 1,
			showFlgNext: 1,
			allData: {},
			LawCode: 0,
			CtgCode: 0,
			CtgCodeList: [],
			LawCodeList: [],

			isChangeFlg: false
		};
	},
	components: { tab1, tab2, tab3, tab4, tab5, tab6 },
	watch: {
		// showFlg(nval, oval) {
		// 	console.log(nval);
		// 	if (this.isChangeFlg) {
		// 		this.startFn();
		// 	}
		// }
	},
	methods: {
		isChangeFlgFn(flg) {
			this.isChangeFlg = flg
			console.log('isChangeFlgFn', flg);
		},

		showFlgFn(n) {
			console.log('this.isChangeFlg', this.isChangeFlg);
			// 当切换时，先将temp保存
			if (n != this.showFlg) {
				this.showFlgNext = n;
				// 当修改提示保存
				if (this.isChangeFlg) {
					this.startFn();
				} else {
					this.showFlg = n;
				}
			}
		},
		// 点击取消时 重置切换的状态值。
		resetShowFlgFn() {
			this.showFlgNext = this.showFlg;
		},

		// 点击确认时 重置切换的状态值。
		resetShowFlgFn1() {
			this.showFlg = this.showFlgNext;
			this.isChangeFlg = false;
		},

		// 点击重新加载时时 重置切换的状态值。
		resetShowFlgFn2() {
			this.isChangeFlg = false;
		},


		changeCtgCode(e) {
			this.CtgCode = e;
			this.getData();
		},
		changeLawCode(e) {
			this.LawCode = e;
			this.getData();
		},

		async startFn() {
			let dataJosn = {}
			let res = await updEnvLabelTipsMsg(dataJosn);
			this.$confirm(res.data.msg, '', {
				confirmButtonText: 'OK',
				cancelButtonText: 'Cancel',
				type: 'warning'
			}).then(async () => {
				let dataJosn = {
					Type: this.showFlg,
					CtgCode: this.CtgCode,
					LawCode: this.LawCode,
				}
				let tempDataJson = {};
				if (this.showFlg == 1) {
					tempDataJson = { LDataListA: this.allData.baseDataList }
				} else if (this.showFlg == 2) {
					tempDataJson = { LDataListA: this.allData.fluidList, LDataListB: this.allData.pressTempList }
				} else if (this.showFlg == 3) {
					tempDataJson = { LDataListA: this.allData.partsStyleList }
				} else if (this.showFlg == 4) {
					tempDataJson = { LDataListA: this.allData.thickStyleList }
				} else if (this.showFlg == 5) {
					tempDataJson = { LDataListA: this.allData.relationFactorList }
				} else if (this.showFlg == 6) {
					tempDataJson = { LDataListA: this.allData.systemIntelligence }
				}
				Object.assign(dataJosn, tempDataJson)
				let res = await UpdEnvLabel(dataJosn);
				if (!res) {
					return
				}
				if (res.data.code != 0) {
					this.$message({
						type: 'error',
						message: res.data.msg
					});
					return
				}
				this.resetShowFlgFn1();
				this.$message({
					type: 'success',
					message: res.data.msg
				});
			}).catch(() => {
				this.resetShowFlgFn();
			});
		},
		async GetEnvLabelComboxFn() {
			let dataJosn = {}
			let res = await GetEnvLabelCombox(dataJosn);
			this.CtgCode = res.data.data.ctgList[0].key;
			this.LawCode = res.data.data.lawList[0].key;
			this.CtgCodeList = res.data.data.ctgList;
			this.LawCodeList = res.data.data.lawList;
			console.log(this.CtgCodeList);
		},
		async getData(isGetCom = false) {
			showLoading();
			if (isGetCom) await this.GetEnvLabelComboxFn();
			let dataJosn = {
				LawCode: this.LawCode,
				CtgCode: this.CtgCode,
				// LawCode: 15,
				// CtgCode: 2,
			}
			let res = await getEnvLabel(dataJosn);
			hideLoading();
			this.allData = res.data.data;
			this.resetShowFlgFn2();
		},
		async initFn() {
			this.getData(true);
		}
	},
	created() { },
	mounted() {
		this.initFn();
	},
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
	height: 100%;
	padding-left: 32px;
	position: relative;


	.title {
		width: 100%;
		height: 32px;
		border-bottom: 1px solid #d8d8d8;
		display: flex;
		align-items: center;

		.iconfont {
			margin-right: 10px;
		}

	}

	.tabs {
		display: flex;
		padding: 16px;
		height: 32px;
		padding-left: 0;

		.btn {
			width: 170px !important;
			// border: 1px solid #C3C3C3;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			margin: 0;
			border-radius: 0;

			// &:nth-child(2) {
			// 	border-left: 0;
			// 	border-right: 0;
			// }

			// span {
			// 	margin-left: 8px;
			// }
		}

		.activeBtn {
			background-color: #106EBE;
			color: #FFF;

		}
	}

}

.content {
	width: 868px;
	min-width: 868px;
}

.footer {
	position: absolute;
	left: 32px;
	bottom: 50px;
	height: 32px;
	display: flex;

	button {
		width: 123px;
		height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		text-align: center;
		line-height: 32px;
		margin-right: 16px;
	}

	.okBTn {
		// background: #106ebe;
		// color: #fff;
	}
}
</style>
